<script setup>
import {onMounted, defineProps, ref, reactive, watch, defineEmits} from "vue";
import CheckInput from "@/components/debris/CheckInput.vue";
import PhotoUpload from "@/components/debris/PhotoUpload.vue";
const dom = defineProps(['fieldItems','modelValue'])
const emit = defineEmits(['modelValue'])
const fields = ref([])
const errors = reactive({})
const limitResult = reactive({})
onMounted(() => {
  const value = dom.modelValue
  dom.modelValue = value||{}
})
watch(()=>dom.fieldItems,(value)=>{
  fields.value = dom.fieldItems
})
watch(dom.modelValue,(value) => {
  emit('update:modelValue',value)
})

function unZip(limitValue,fieldType){
  const has = limitResult.hasOwnProperty(fieldType)
  if(!has){
    switch (fieldType) {
      case "03":
        limitResult[fieldType] = analysisNumber(limitValue)
        break
      case "07":
        limitResult[fieldType] = analysisNumber(limitValue)
        break
      default:
        limitResult[fieldType] = analysisSelect(limitValue)
    }
  }
  return limitResult[fieldType]
}

function analysisNumber(limitValue){
  let number
  try {
      number = JSON.parse(limitValue)
    if(!Object.keys(number).includes('max','min')){
      number = {max:null,min:null}
    }
  }catch(error){
      number = {max: null,min: null}
  }
  return number
}

function analysisSelect(limitValue) {
  let select
  try {
      select = JSON.parse(limitValue)
    if(typeof select !== 'object') select = {}
  }catch(error){
    select = {}
  }
  return select
}

</script>

<template>
  <div class="mb-3" v-for="field in fields">
    <label :for="field.id" class="form-label">{{ field.fieldName }}</label>
    <template v-if="field.fieldType === '01'">
      <input :id="field.id" :name="field.fieldCode" type="text" :aria-describedby="field.fieldCode"
             @blur="()=>{ delete errors[field.fieldCode] }" v-model="dom.modelValue[field.id]"
             :class="(errors.hasOwnProperty(field.fieldCode)) && ' is-invalid ' " class="form-control" :required="!field.allowEmpty">
    </template>
    <template v-else-if="field.fieldType === '02'">
         <textarea class="form-control" :class="(errors.hasOwnProperty(field.fieldCode)) && ' is-invalid ' "
                   v-model="dom.modelValue[field.id]" :aria-describedby="field.fieldCode"
                   @blur="()=>{ delete errors[field.fieldCode] }" :id="field.id" :required="!field.allowEmpty"></textarea>
    </template>
    <template v-else-if="field.fieldType === '03'">
        <input type="number" class="form-control" :class="(errors.hasOwnProperty(field.fieldCode)) && ' is-invalid ' "
                  v-model="dom.modelValue[field.id]" :aria-describedby="field.fieldCode"
               @blur="()=>{ delete errors[field.fieldCode] }" :id="field.id" :required="!field.allowEmpty"
               :max="unZip(field.limitValue,field.fieldType).max" :min="unZip(field.limitValue,field.fieldType).min" >
    </template>
    <template v-else-if="field.fieldType === '04'">
      <select class="form-select" v-model="dom.modelValue[field.id]" :class="(errors.hasOwnProperty(field.fieldCode)) && ' is-invalid ' "
              :aria-describedby="field.fieldCode" @blur="()=>{ delete errors[field.fieldCode] }" :id="field.id" :required="!field.allowEmpty">
        <option v-for="(value,key) in unZip(field.limitValue,field.fieldType)" :value="key">{{ value }}</option>
      </select>
    </template>
    <template v-else-if="field.fieldType === '05'">
      <div class="d-md-block ">
        <CheckInput :checks="unZip(field.limitValue,field.fieldType)" :id="field.id" v-model="dom.modelValue[field.id]" />
      </div>
    </template>
    <template v-else-if="field.fieldType === '06'">
      <div class="d-md-block ">
        <div class="form-check form-check-inline" v-for="(value,key) in unZip(field.limitValue,field.fieldType)" >
          <input class="form-check-input" type="radio" :name="field.fieldCode" :id="`${field.id}-${key}`" :value="key" v-model="dom.modelValue[field.id]">
          <label class="form-check-label" :for="`${field.id}-${key}`">{{ value }}</label>
        </div>
      </div>
    </template>
    <template v-else-if="field.fieldType === '07'">
      <input type="range" class="form-range" :name="field.fieldCode" :id="`${field.id}-${key}`"  v-model="dom.modelValue[field.id]"
             :max="unZip(field.limitValue,field.fieldType).max" :min="unZip(field.limitValue,field.fieldType).min" >
    </template>
    <template v-else-if="field.fieldType === '08'">
      <el-date-picker :id="field.id" :name="field.fieldCode" class="form-control" v-model="dom.modelValue[field.id]" type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"/>
    </template>
    <template v-else-if="field.fieldType === '09'">
      <el-date-picker :id="field.id" :name="field.fieldCode" v-model="dom.modelValue[field.id]" type="datetimerange"
         format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
    </template>
    <template v-else-if="field.fieldType === '10'">
      <PhotoUpload v-model="dom.modelValue[field.id]" :is-upload=" (field.checkPlugs||[]).includes('PhotoUpload')" />
    </template>
    <div :id="field.fieldCode" class="invalid-feedback" v-if="(errors.hasOwnProperty(field.fieldCode))">{{errors[field.fieldCode] }}</div>
  </div><!--//form-group-->
</template>